<template>
  <div id="app">
    <h2>{{message}}</h2>
    <router-view />
    <van-overlay :show="changeShowLoading"
                 @click="changeShowLoading">
      <div class="wrapper"
           @click.stop>
        <div class="block" />
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { getListAPI } from '@/api/productInfo.js'
import { mapGetters, mapMutations } from 'Vuex'
export default {
  name: 'App',
  data () {
    return {
      message: 'a模块的内容'
    }
  },
  computed: {
    ...mapGetters(['showLoading'])
  },
  ...mapMutations(['changeShowLoading']), // 赋别名的话，这里接收对象，而不是数组
  created () {
    getListAPI().then(res => { console.log(res) })
    setTimeout(() => {
      getListAPI().then(res => { console.log(res) })
    }, 200)
    setTimeout(() => {
      getListAPI().then(res => { console.log(res) })
    }, 400)
  }
}
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
</style>
